/* 图表页面思路分析: 从左往右,从上往下依次加载图表数据
1.班级概览
2.学生信息列表
    折线图 :  x轴：姓名   y轴：期望薪资+实际薪资
    饼图 ： 省份信息
    地图 ： 县信息
3.学生成绩列表
    柱状图 :  x轴：小组   y轴：分数成绩
4.点击柱状图右上角三个小点,可以实现 切换成绩效果
*/
// 获取本地储存里面的CMSTOKEN
// 如果没有登录 不能访问首页Vue路由导航守卫
const token = localStorage.getItem("CMSTOKEN");
if (!token) {
  alert("你还没登陆呢");
  location.href = "./login.html";
}
//   发送ajax请求
axios({
  url: "/student/overview",
}).then(function ({ data: { data: res } }) {
  console.log(res);
  document.querySelector(".total").innerHTML = res.total;
  document.querySelector(".avgAge").innerHTML = res.avgAge;
  document.querySelector(".avgSalary").innerHTML = res.avgSalary;
  document.querySelector(".proportion").innerHTML = res.proportion;
});
axios({
  url: "/student/list",
}).then(function ({ data: { data: res } }) {
  // 调用函数 显示折线图里的相关数据
  // 折线图
  /*const lineObj = {
      names:[],//放x轴里面的同学的姓名
      salary:[],//放 期望薪资的数据
      trusalary:[]//放实际薪资的数据
    }
})*/
  const lineObj = {
    names: [], //放x轴里面的同学的姓名
    salary: [], //放 期望薪资的数据
    truesalary: [], //放实际薪资的数据
  };
  const pieArr = [];
  //遍历数据
  res.forEach((item) => {
    lineObj.names.push(item.name);
    lineObj.salary.push(item.salary);
    lineObj.truesalary.push(item.truesalary);
    const index = pieArr.findIndex((val) => val.name === item.province);
    if (index === -1) {
      pieArr.push({
        name: item.province,
        value: 1,
      });
    } else {
      pieArr[index].value++;
    }
  });
  setLine(lineObj);
  setPie(pieArr);
});

const setLine = (data) => {
  const myCharts = echarts.init(document.querySelector(".line"));
  const option = {
    //鼠标移入提示
    tooltip: {
      trigger: "axis",
      position: function (pt) {
        return [pt[0], "10%"];
      },
    },
    // 标题
    title: {
      text: "薪资 Salary",
      textStyle: {
        color: "#6d767e",
      },
    },
    //x轴数据: 必须
    xAxis: {
      type: "category", // 类别
      boundaryGap: false, // 两侧留白
      data: data.names,
    },
    //y轴数据：必须
    yAxis: {
      type: "value",
      boundaryGap: [0, "50%"], // Y轴留白，会影响最大值，最小值
    },
    // 顶部小提示
    legend: { top: 20 },
    // 缩放工具栏
    dataZoom: [
      {
        // inside鼠标滚轮实现缩放，slider通过滑动条实现缩放(默认值)
        type: "slider",
        start: 0, // 起始位置
        end: 20, // 结束位置
      },
    ],
    series: [
      {
        name: "期望薪资",
        type: "line",
        symbol: "none",
        smooth: true, //设置折线圆角
        itemStyle: {
          color: "#ee6666",
        },
        data: data.salary,
      },
      {
        name: "实际薪资",
        type: "line",
        symbol: "none",
        smooth: true, //开启平滑
        itemStyle: {
          color: "#5470c6",
        },
        data: data.truesalary,
      },
    ],
  };
  // 3.3使用刚指定的配置项和数据显示图表。
  myCharts.setOption(option);
};

const setPie = (data) => {
  const myCharts = echarts.init(document.querySelector(".pie"));
  let option = {
    // 标题
    title: {
      text: "籍贯 Hometown",
      textStyle: {
        color: "#6d767e",
      },
    },
    // 提示框组件
    tooltip: {
      // '各地人员分布<br> 江苏省 <b>7</b> 人 占比 12.5%'
      formatter: "{a}<br>{b} <b>{c}</b> 人 占比 {d}%",
    },
    series: [
      {
        name: "各地人员分布",
        type: "pie",
        radius: ["10%", "60%"],
        // 圆心位置
        center: ["50%", "50%"],
        // 面积模式或者半径模式 - 由产品经理决定
        roseType: "area",
        itemStyle: {
          // 扇形圆角
          borderRadius: 4,
        },
        data,
      },
    ],
  };
  // 3.3使用刚指定的配置项和数据显示图表。
  myCharts.setOption(option);
};
setPie();
const setBar = (data) => {
  const myCharts = echarts.init(document.querySelector(".barChart"));
  let option = {
    // 提示框组件
    tooltip: {
      trigger: 'axis'
    },
    // 图例组件
    legend: {},
    // 类似于 pdding的效果
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: data.group
      }
    ],
    yAxis: [
      {
        type: 'value',
         axisLabel: {
          formatter: '{value} 分'
        },
        min: 0,
        max: 100,
        interval: 10
      },
      {
        type: 'value',
         axisLabel: {
          formatter: '{value} 人'
        },
        min: 0,
        max: 10,
        interval: 1
      }
    ],
    series: [
      {
        name: '平均分',
        type: 'bar',
        barWidth: 15,
        data: data.avgScore
      },
      {
        name: '低于60分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: data.lt60
      },
      {
        name: '60分到80分之间人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data:data.gt60
      },
      {
        name: '高于80分人数',
        type: 'bar',
        barWidth: 15,
        yAxisIndex: 1,
        data: data.gt80
      }
    ]
  }
  myCharts.setOption(option);
};
// setBar();
// 根据次数获取对应组的成绩
const batch = function (batch =1){
    axios({
        url:'/score/batch',
        params:{
            batch
        }
    }).then(({ data:res }) => {
        console.log(res);
        setBar(res.data)
    })
}
batch()
// 获取ul标签
const ul =document.querySelector('#batch')
// 给span标签注册点击事件
document.querySelector('span.btn').addEventListener('click',function(){
    // ul.style.display = 'block'
    if(ul.style.display === 'block'){
        ul.style.display ='none'
    }else{
        ul.style.display = 'block'
    }
})
// 获取ul里面所有的li
ul.querySelectorAll('li').forEach((item,index) => {
    // 给每一个li注册点击事件
    item.addEventListener('click',function(){
        // 调用获取第几次的成绩的函数
        batch(index+1)
    })
})
